<template>
  <div>
    <el-container>
      <el-aside class="left_bar" width="180px">
        <p class="left_title">基础管理</p>
        <el-menu mode="verticle" default-active="3">
          <el-menu-item class="menu-item" index="1" v-on:click="Monitor">监测资质</el-menu-item>
          <el-menu-item class="menu-item" index="2" v-on:click="RatesConfiguration">收费标准配置</el-menu-item>
          <el-menu-item class="menu-item" index="3" v-on:click="FormManager">表单管理</el-menu-item>
          <el-menu-item class="menu-item" index="4" v-on:click="Enterprise">企业信息管理</el-menu-item>
          <el-menu-item class="menu-item" index="5" @click="EnvironmentManager">环境质量点位管理</el-menu-item>
          <el-menu-item class="menu-item" index="6">采样规范管理</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-row>
          <el-tabs type="border-card">
            <el-tab-pane label="原始记录单">
              <el-row>
                <el-col :span="1.5">
                  <a class="control_button">新增表单</a>
                </el-col>
                <el-col :span="1">
                  <a class="control_button">编辑</a>
                </el-col>
                <el-col :span="1">
                  <a class="control_button">删除</a>
                </el-col>
                <el-col :span="1">
                  <a class="control_button">起用</a>
                </el-col>
                <el-col :span="1">
                  <a class="control_button_end">禁用</a>
                </el-col>
                <el-col :span="6" :offset="12">
                  <el-input clearable suffix-icon="el-icon-search"></el-input>
                </el-col>
              </el-row>
              <!-- 上部表单位置 -->
              <el-row>
                <el-table max-height="400" style="width: 100%">
                  <el-table-column label="No" width="40"></el-table-column>
                  <el-table-column label="表单名称" width="150"></el-table-column>
                  <el-table-column label="检测机构名称" width="200"></el-table-column>
                  <el-table-column label="修订版本号" width="150"></el-table-column>
                  <el-table-column label="表单编号" width="100"></el-table-column>
                  <el-table-column label="状态" width="150"></el-table-column>
                  <el-table-column label="表单附件" width="200"></el-table-column>
                  <el-table-column label="管理" width="150"></el-table-column>
                </el-table>
              </el-row>
              <!-- 分页栏位置 -->
              <el-row>
                <el-col :span="24">
                  <!-- 分页栏 -->
                  <el-pagination
                    class="pagination"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="sizes, prev, pager, next"
                    :total="1000"
                  ></el-pagination>
                </el-col>
              </el-row>
              <!-- 下部表单 -->
              <el-row>
                <el-col :span="2">
                  <p class="clearInfo">详细信息</p>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="1">
                  <a class="control_button">新增</a>
                </el-col>
                <el-col :span="1">
                  <a class="control_button">删除</a>
                </el-col>
                <el-col :span="1">
                  <a class="control_button">导入</a>
                </el-col>
                <el-col :span="1">
                  <a class="control_button">导出</a>
                </el-col>
                <el-col :span="2">
                  <a class="control_button_end">下载模板</a>
                </el-col>
              </el-row>
              <el-row>
                <el-table max-height="300" style="width: 100%">
                  <el-table-column label="No" width="150"></el-table-column>
                  <el-table-column label="方法名称" width="400"></el-table-column>
                  <el-table-column label="标准号" width="400"></el-table-column>
                </el-table>
              </el-row>
              <!-- 第一部分结尾 -->
            </el-tab-pane>
            <el-tab-pane label="采样单">采样单</el-tab-pane>
            <el-tab-pane label="汇总单">汇总单</el-tab-pane>
            <el-tab-pane label="自送样登记单">自送样登记单</el-tab-pane>
          </el-tabs>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    // left_bar跳转
    Monitor: function () {
      this.$router.push('/base/MonitoringQualification')
    },

    RatesConfiguration: function () {
      this.$router.push('/base/RatesConfiguration')
    },

    FormManager: function () {
      // this.$router.push('/base/FormManager')
    },

    Enterprise: function () {
      this.$router.push('/base/EnterpriseInfoManager')
    },

    EnvironmentManager: function () {
      this.$router.push('/base/EnvironmentManager')
    }
  }
}
</script>

<style>
.left_bar {
  background-color: transparent;
  height: 100%;
  background-color: gray;
  color: aliceblue;
}

.left_title {
  text-align: center;
}

.menu-item {
  background-color: transparent;
}

.control_button {
  cursor: pointer;
  border-left-style: solid;
  border-width: 0.1px;
  border-color: beige;
  text-align: center;
  font-size: 10px;
  padding: 5px;
  padding-left: 15px;
}
.control_button_end {
  cursor: pointer;
  border-left-style: solid;
  border-right-style: solid;
  border-width: 0.1px;
  border-color: beige;
  text-align: center;
  font-size: 10px;
  padding: 5px;
  padding-left: 8px;
  padding-right: 8px;
}
.control_button:hover {
  border-left-style: solid;
  border-width: 0.1px;
  border-color: beige;
  background-color: gray;
}
.control_button_end:hover {
  border-left-style: solid;
  border-right-style: solid;
  border-width: 0.1px;
  border-color: beige;
  background-color: gray;
}

.pagination {
  margin-top: 10px;
}

.clearInfo {
  font-size: 13px;
  color: gray;
}
</style>
